import React, { useRef, useState } from 'react';
import { Button, Table } from 'antd';
import * as XLSX from 'xlsx'

const Index = () => {

  const inpRef = useRef()

  const [proList,setProList] = useState()

  function upload(e){
    // 创建文件读取器
    const reader = new FileReader()
    // 将文件读取成数据流
    reader.readAsBinaryString(e.target.files[0])

    // 读取成功之后的回调函数
    reader.onload = ()=>{
      // 将文件数据流读取成 js 对象
      const boox = XLSX.read(reader.result, {type: 'binary'})
      // 将 工作表1 中的内容读取出来
      let res = boox.Sheets['工作表1']
      // 将表内容转换成 json 数据
      res = XLSX.utils.sheet_to_json(res)
      console.log(res);
      setProList(res)
    }
  }

  const columns = [
    {
      title: '序号',
      render(t,r,i){
        return <span> {i + 1} </span>
      },
      width: 100
    },{
      title: '商品名称',
      dataIndex: 'proname'
    }
  ]

  return (
    <div>
      <Button onClick={()=>{
        inpRef.current.click()
      }}>文件导入</Button>
      <input type="file" ref={inpRef} onChange={(e)=>{upload(e)}} hidden />

      <Table
      dataSource={proList}
      rowKey={'banners'}
      scroll={{y: 420}}
      columns={columns} />
    </div>
  );
};

export default Index;
